<template>
      <el-row  class='text-left'>
           <!--  搜索操作区 -->
            <el-row class="pb10  little-header">
                  <el-col :md='18' :lg='14'  >
                        
                            <el-col  :xs='9'  :sm='5'  :md='5' :lg='5'  align='left'>
                            		  <el-select v-model="search.item_type" placeholder="请选择"  class=''>
                      							    <el-option
                      							      v-for="item in typedata"
                      							      :key="item.value"
                      							      :label="item.label"
                      							      :value="item.value">
                      							    </el-option>
                      					  </el-select>
                            </el-col>
                            <el-col  :xs='9'  :sm='5' :md='5' :lg='5'  class='ml10  mr8'  align='left'>
                    					    <el-select v-model="search.item_state" placeholder="请选择"  >
                    							    <el-option
                    							      v-for="item in project_state"
                    							      :key="item.value"
                    							      :label="item.label"
                    							      :value="item.value">
                    							    </el-option>
                    					    </el-select>
                            </el-col>
                            <el-col  :xs='10'  :sm='7'  :md='7' :lg='7' >
                                  <el-input  placeholder='请输入项目名称/创建人' v-model.trim='search.name'  @focus='focusinput($event)'  @blur = 'blurinput($event)'></el-input>
                            </el-col>
                            <el-col  :xs='3'  :sm='2'  :lg='2'  class='ml10'>
                                  <el-button icon="el-icon-search" type='primary' @click='pageInit(1)'  >搜索</el-button>
                            </el-col>
                       
                  </el-col>
                  <el-col :md='5' :lg='{span:4,offset:5}' >  
                        <div align="right">
                                <router-link to='/project/addNew'  v-if='permit.add'><el-button type="primary" icon="el-icon-plus" size="small" round  >新增</el-button></router-link>
                                <el-button  v-if='permit.export'  icon="el-icon-upload2"  size="small" round  class='export-icon  '   @click="handleExport()">导出</el-button>
                        </div>
                  </el-col>
            </el-row>
            <!-- <el-row class='pb10 text-left' >
                  <el-button   type="primary"  size="small" round  plain  @click='project_lift()'>提审</el-button>
                  <el-button   type="primary"  size="small" round plain  @click='project_hang()'>挂牌</el-button>
                   <el-button   type="primary"  size="small" round plain  @click='project_gui()'>归档</el-button> 
            </el-row> -->
            <!-- table -->
            <el-table border  :data="tableList"   :cell-class-name='hover'  @cell-click='checkUser'  :spna='23'>
                	
                  <el-table-column prop="prjName"            label="项目名称"     align="center"  v-if='tableName.name==true'  fixed></el-table-column>
                  <el-table-column prop="prjSize"     label="规模（万元）"   align="center"  v-if='tableName.guimo==true'></el-table-column>
                  <el-table-column prop="prjType"            label="项目类型"     align="center"  v-if='tableName.type==true'>
                        <template slot-scope='list'>
                              {{list.row.prjType | project_type}}
                        </template>
                  </el-table-column>
                 
                  <el-table-column prop="entMemberType"            label="审批状态"     align="center"  v-if='tableName.exa==true'>
                        <template slot-scope="scope">
                              <!-- 未通过 -->
                              <span  class='color-red'  v-if='scope.row.status == 3  || scope.row.status == 6 '>{{scope.row.status | project_status}}</span>
                              <!-- 已通过 -->
                              <span  class='color-success'  v-else-if='scope.row.status == 4  || scope.row.status == 7 '>{{scope.row.status | project_status}}</span>
                              <!-- 审批中 -->
                              <span  class='color-999'  v-else-if='scope.row.status == 2  || scope.row.status == 5 '>{{scope.row.status | project_status}}</span>
                              <!-- 未提审 -->
                              <span  v-else>{{scope.row.status | project_status}}</span> <br>
                              <span  v-if='scope.row.assigneeName'  class='ft14'>(当前审批指派->{{scope.row.assigneeName}})</span>
                        </template>
                  </el-table-column>
                  <el-table-column prop="chargesStandard"            label="收费标准"     align="center"  v-if='tableName.fee==true'>
                        <template slot-scope="scope">
                              <span  v-if='scope.row.chargesStandard!="" '>{{scope.row.chargesStandard}}% {{scope.row.chargesMethod | pro_chargesMethod}}</span>
                              <span  v-else>--</span>
                        </template>
                  </el-table-column>
                  <el-table-column prop="collectionAmtType"          label="资金路径"     align="center"  v-if='tableName.zijin==true'>
                        <template slot-scope="scope">
                              {{scope.row.collectionAmtType  | pro_route}}
                              
                        </template>
                  </el-table-column>
                  <el-table-column prop=""          label="存续期限"     align="center"  v-if='tableName.cunxu==true'>
                        <template slot-scope="scope">
                              {{scope.row.subsistingCycle}}个月
                              
                        </template>
                  </el-table-column>
                  <el-table-column prop=""          label="收费方式"     align="center"  v-if='tableName.charge==true'>
                        <template slot-scope="scope">
                              {{scope.row.chargingMethod  | project_fare_type}}
                              <span  v-if='scope.row.chargingMethod == 4'>{{scope.row.chargingValue}}</span>
                        </template>
                  </el-table-column>

                  <el-table-column prop="createTime"      label="发起时间"     align="center"  v-if='tableName.createTime==true'>
                        <template slot-scope="scope">
                              {{scope.row.createTime | formatDate}}
                        </template>
                  </el-table-column>
                  <el-table-column prop="createUserName"  label="发起人"       align="center"  v-if='tableName.person==true'></el-table-column>
                  <el-table-column prop="principalName"  label="项目负责人"       align="center"  v-if='tableName.duty_person==true'></el-table-column>
                  <el-table-column prop="modifyTime"      label="更新时间"     align="center"  v-if='tableName.updateTime==true'>
                        <template slot-scope="scope">
                              {{scope.row.modifyTime | formatDate}}
                        </template>
                  </el-table-column>   
                  <el-table-column prop=" "            label="审批历史"     align="center"  v-if='tableName.shenpi==true  && permit.history'>
                          <template v-slot="list">
                              <!-- 项目审批状态为  除了未发起审批之外 都有查看审批历史的权限 -->
                              <router-link  :to='{path:"/project/ExaHistory_pro",query:{code:list.row.code,status:list.row.status,from:"prj"}}'  v-if='list.row.status!=1  &&  list.row.status<8'><el-button  type="primary" size="mini" round  plain>查看</el-button></router-link>

                              <span  v-else>暂无</span>
                          </template>
                  </el-table-column>
                  <el-table-column                        label="操作"          align="center"  width="250"  v-if='permit.prj_Lift || permit.edit || permit.delete'>
                          <template v-slot="list">
                                <span  v-if=' permit.prj_Lift'>
                                    <el-button  v-if='list.row.status == 1  ' type="primary"  size="small" round  plain  @click='project_lift(list.$index, list.row.code,1,1)'>立项提审</el-button>
                                    <el-button  v-if='list.row.status == 3  || list.row.status == 8' type="primary"  size="small" round  plain  @click='project_lift(list.$index, list.row.code,1,0)'  title='修改提审信息后可再次发起提审'>立项提审</el-button>

                                    <el-button  v-if='list.row.status == 4 ' type="primary"  size="small" round  plain  @click='project_lift(list.$index, list.row.code,2,1)'>过会提审</el-button>
                                    <el-button  v-if='list.row.status == 6  || list.row.status == 9' type="primary"  size="small" round  plain  @click='project_lift(list.$index, list.row.code,2,0)'   title='修改提审信息后可再次发起提审'>过会提审</el-button>
                                </span>
                                <!-- 审批中，所有人都不可以操作 -->
                                <!-- <span  v-if='(list.row.status == 2 || list.row.status == 5)' >——</span> -->
                                <!-- 立项提审后，未有人审批，撤回操作 -->
                                <el-button  v-if='((list.row.status == 2 && list.row.approvalStatus == 0) || (list.row.status == 5  &&  list.row.approvalStatus == 0))' type="primary"  size="small" round   @click='drawback(list.row.status,list.row.code)'  title='撤回后可修改提审信息'>撤回提审</el-button>
                                 <!-- 审批中，所有人都不可以操作 -->
                                <span  v-if='((list.row.status == 2 && list.row.approvalStatus == 1) || (list.row.status == 5  &&  list.row.approvalStatus == 1))'>——</span>
                                <span  v-if='permit.edit && !permit.edit_all'>
                                    <!-- 未立项 立项审批未通过 通过立项 过会未通过 通过过会 最好的解决办法在角色里再创一个权限 √ -->
                                    
                                    <el-button v-if='list.row.status == 1  ||  list.row.status == 3  || list.row.status == 6  ||  list.row.status == 8  ||  list.row.status == 9'  type="primary" size="mini" round @click="ProjectEdit(list.$index, list.row)">编辑</el-button>
                                    <span  v-if='list.row.status == 7'>——</span>
                                </span>
                                <span  v-if='permit.edit_all'>
                                      <el-button v-if=' list.row.status == 4  ||  list.row.status == 7  ||  list.row.status == 1 || list.row.status == 3 || list.row.status == 6  ||  list.row.status == 8  ||  list.row.status == 9'   type="primary" size="mini" round @click="ProjectEdit(list.$index, list.row)">编辑</el-button>
                                </span>

                                <!-- 删除功能 onlySystem -->
                                <el-button  v-if='list.row.status == 1  && permit.delete' type="warning"  size="mini" round @click="ProjectDelete(list.$index, list.row)">删除</el-button>
                                <!-- 标记删除功能 -->
                                <el-button  v-if='list.row.status == 1  &&permit.badge_del  && list.row.delMark == 0' type="danger"  size="mini" round @click="ProjectDelete_badge(list.$index, list.row)">撤销</el-button>
                                <el-button  v-if='list.row.status == 1  &&permit.badge_del  && list.row.delMark == 1' type="danger" plain size="mini" round @click="cancelDelete_badge(list.$index, list.row)">取消删除</el-button>

                          </template>
                  </el-table-column>
            </el-table>
            
           <!-- <i class='icon icon-choose fl cursor'  title="表头选择" @click='changeTable()'></i> -->
           <i class='el-icon-menu  cursor  inline-block  mt6'  title="表头选择" @click='changeTable()'  align='left'></i>

            <!-- 分页 -->
            <el-pagination class='mt28'   align='center'
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="search.currentPage"
                    :page-sizes="[10, 20]"
                    :page-size="10"
                    :pager-count="5"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="Total">
            </el-pagination>
            <!-- 表头 -->
            <tableName ref='tableNameChange' ></tableName>
      </el-row>
  
</template>

<script>
//接口
import  { listProject,removeProject,exportProject,removeProject_badge,removeCancel_badge  } from '@/api/professional_work/project/index'
import  { Re_exa_project,getExaCode }  from '@/api/examine/index' 
import  { drawback_lift }  from '@/api/examine/index' 

//组件
//新增 编辑
import  tableName  from  '@/components/professional_work/project/tableName'


import { mapGetters } from 'vuex'
const cityOptions = ['项目名称', '规模', '项目类型', '利率','产品','标的','项目状态','更新时间','经办人','审批历史'];
export default {
  name: 'item',
  data () {
    return {
      /*static*/       
      //项目类型选项
      typedata: [{value: '',label: '项目类型'}, 
                {value: '1',label: '收益权类'}, 
                {value: '2',label: '定向融资类'}, 
                {value: '3',label: '资产登记交易类'}, 
                {value: '4',label: '资产转让增值'},
                {value: '5',label: '其他类'}],
      //项目类型选项
      project_state: [{value: '',label: '项目状态'},
                      {value: '1',label: '未立项'},
                      {value: '2',label: '立项审批中'}, 
                      {value: '3',label: '立项审批未通过'},
                      {value: '4',label: '已立项，待过会'},
                      {value: '5',label: '过会审批中'}, 
                      {value: '6',label: '过会审批未通过'},
                      {value: '7',label: '已过会'},],
      export_src:process.env.BASE_API+'/op/fileupload/export_excel?dataType=1&pageNo=1&pageSize=1000',//导出数据到Excel
      /*active*/
      loading:false,
      //查询 /初始化
      search: {
        name: this.Global.ie_nine == true ?'请输入项目名称/创建人':'',/*placeholder 兼容ie9 △*/
        limit: 10,
        currentPage:1,
        item_type:'',
        item_state:'',
      },
      search_place_str:'请输入项目名称/创建人',//placeholder输入内容 placeholder 兼容ie9 △
      /*当前用户允许权限*/
      permit:{
          check:false,//查看详情
          //增删改
          delete:false,
          add:false,
          edit:false,/*项目经理 编辑项目权限*/
          edit_all:false,/*所有不在审批状态 可编辑项目权限*/
          badge_del:false,//标记删除 非系统管理员删除时显示
          //提审 导出 查看历史
          prj_Lift:false,
          export:false,
          history:false,
      },

      tableName:{
        name:true,
        guimo:true,
        type:true,
        exa:true,
        fee:false,
        zijin:false,
        cunxu:false,
        charge:false,
        
        createTime:true,
        person:true,
        duty_person:true,
        updateTime:true,
        shenpi:true,
        check_all:false,
      },
      currentCheckedRow:'',//当前选中的row code记录
      Total:null,//表格总页数

      //列表data
      tableList:[],
      rolePemit:false,//当前角色是否是 “总经理，系统管理员”
      liftPermit:false,//（当前角色是否是 “项目经理”   先不这样判断） 当前用户权限是否允许提审

    }
  },
  created() {
    
    this.jurisdiction()//初始化按钮权限操作
    this.pageInit()

  },
  methods:{
    // 初始化表格数据
    pageInit(num){
      let that =this,url;
      /*placeholder 兼容ie9 △*/
      if(this.search.name == this.search_place_str){
          this.search.name = ''
      }
      /*搜索，删除条件进入*/
      if(num == 1){
        this.search.currentPage = 1
      }
      if(this.permit.check_all){
        url='/op/project/get_all_project_list'
      }
      else{
        url='/op/project/get_project_list'
      }
      listProject(url,this.search).then(res => {
          if(res.data.flag == true){
              that.Total = res.data.totalRs
              that.tableList = res.data.dataList
              /*placeholder 兼容ie9 △*/
              if(this.search.name == ''){
                  this.search.name = this.Global.ie_nine == true ? this.search_place_str:''
              }
          }
      })
      .catch(error => {
            console.log(error)
      })
    },
    //初始化按钮权限操作
    jurisdiction(){
        // let arr = []  权限操作v1.0
        // this.button_limit.forEach((item)=>{
        //   if(item.parentId == 20100){
        //      arr.push(item.name)
        //   }
        // })
        // this.button_str = arr.join(',')

        //权限操作v1.1
        /*查看*/
        this.permit.check = this.button_limit.find(item => {
          return item.id === 20102
        })
        /*新增*/
        this.permit.add = this.button_limit.find(item => {
          return item.id === 20103
        })
        /*编辑*/
        this.permit.edit = this.button_limit.find(item => {
          return item.id === 20104
        })
        /*删除*/
        this.permit.delete = this.button_limit.find(item => {
          return item.id === 20105
        })
        /*标记删除*/
        this.permit.badge_del = this.button_limit.find(item => {
          return item.id === 20112
        })

        /*项目提审*/
        this.permit.prj_Lift = this.button_limit.find(item => {
          return item.id === 20106
        })
        /*导出*/
        this.permit.export = this.button_limit.find(item => {
          return item.id === 20109
        })
        /*审批历史查看*/
        this.permit.history = this.button_limit.find(item => {
          return item.id === 20110
        })

        /*所有不在审批状态 可编辑*/
        this.permit.edit_all = this.button_limit.find(item => {
          return item.id === 20111
        })
        /*可查看所有列表权限*/
        this.permit.check_all = this.button_limit.find(item => {
          return item.id === 20113
        })
    },
    
    /*placeholder 兼容ie9 focus-blur △*/
    focusinput(e,str){
        if(this.Global.ie_nine == true){
            this.search.name = this.search.name == this.search_place_str ? '':this.search.name
        }
    },
    blurinput(e,str){
        if(this.Global.ie_nine == true){
            let val = e.srcElement.value//ie9下只能用这个值
            this.search.name = val == '' ? this.search_place_str:val
        }
    },
    hover({row, column, rowIndex, columnIndex}){
    //console.log(row, column, rowIndex, columnIndex)
    //设置表格第一列的特殊样式  该样式需要在APP 或者 public.css设置
      if(columnIndex == 0  && this.permit.check){
        return 'activeCol'
      }
    },
    //点击表格第一列  查看详情
    checkUser(row, column, cell, event){

        if(column.label == '项目名称'  && this.permit.check){
            // this.$router.push({name:'project_Detail',params:{code:row.code}})
            this.$router.push({path:'/project/Detail',query:{code:row.code}})
        }
    },
    //列 单选操作
    changeSelect(val,row){
      // console.log(val,row)
      // console.log(this.currentCheckedRow)
      //是否选中
      if(val == true){
          //当前选中值 是否有值
          if(this.currentCheckedRow != ''){
              this.currentCheckedRow.checked = false
              this.currentCheckedRow = ''
          }
          this.currentCheckedRow = row
      }
      else{
          this.currentCheckedRow.checked = false
          this.currentCheckedRow = ''
      }
    },
    //提审
     project_lift(index,code,type,isFirst){
        let that = this
        if(isFirst == true){
            this.$router.push({path:'/project/lift',query:{code,type,isFirst}})
        }
        else{
            getExaCode(code,type).then(res=>{
              if(res.data.flag == true){
                let itemcode = res.data.reqCode
                this.$router.push({path:'/project/lift',query:{type,isFirst:false,itemcode}})
              }
            })
        }
    },
    //撤回
    drawback(status,code){
        let url,type
        //立项撤回
        if(status == 2){
            url = '/op/project_req/roll_back_req'
            type = 1
        }
        if(status == 5){
          url = '/op/project_meeting_req/roll_back_req'
          type = 2
        }
        this.$confirm('确定撤回提审？撤回后可修改提审信息并再次发起提审', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
            getExaCode(code,type).then(res=>{
              if(res.data.flag == true){
                let itemcode = res.data.reqCode
                drawback_lift(url,itemcode).then(response=>{
                    if(response.data.flag == true){
                      this.$message({type:'success',message:response.data.msg})
                      this.pageInit()
                    }
                    if(response.data.flag == false){
                      this.$message({type:'error',message:'当前已在审批中，无法撤回'})
                    }
                })
              }
            })
        })
    },
    //编辑
    ProjectEdit(index,row){
        this.$router.push({path:"/project/edit",query:{code:row.code}}) 
        // this.$router.push({name:"addNew_project",params:{code:row.code}}) //需要用path + query这个才能让他在本页面报权限错误， 如果
        //是name + params 会跳转到首页再报错 因为他用name来判断 
    },
    //删除
    ProjectDelete(index,row){
        let that=this;
        this.$confirm('确定删除该条数据吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          removeProject(row.code)
            .then(response => {
              if(response.data.flag == true){
                  this.$message({type:'success',message:response.data.msg})
                  this.pageInit()
              }
            })
            .catch(error => {
              that.outputError(error)
            })
        })
        .catch(() => {})
    },
    //标记删除
    ProjectDelete_badge(index,row){
        let that=this;
        this.$confirm('标记撤销后，需管理员确认才能删除。期间，您也可取消撤销', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(async () => {
              that.$store.commit('showLoading')
              await removeProject_badge(row.code)
                .then(res => {
                    if(res.data.flag == true){
                        this.$message({type:'success',message:res.data.msg})
                        this.pageInit()
                    }
                })
                .catch(error => {
                  that.outputError(error)
                })
              this.$store.commit('hideLoading')
          })
          .catch(() => {})
    },
    cancelDelete_badge(index,row){
        let that=this;
        this.$confirm('确定取消删除？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(async () => {
              that.$store.commit('showLoading')
              await removeCancel_badge(row.code)
                .then(res => {
                    if(res.data.flag == true){
                        this.$message({type:'success',message:res.data.msg})
                        this.pageInit()
                    }
                })
                .catch(error => {
                  that.outputError(error)
                })
              this.$store.commit('hideLoading')
          })
          .catch(() => {})
    },

    //导出
    handleExport(){
          // window.location.href=this.export_src
          this.ExportFile_com(1)
          
    },
    //
    /*每页显示条数变化 */
    handleSizeChange(val) {
      this.search.limit = val;
       /*页数改变，scrolltop*/
      document.querySelector('.el-main').scrollTop = 0
      this.pageInit()
    },
    /*页数变化 */
    handleCurrentChange(val) {
      this.search.currentPage = val
       /*页数改变，scrolltop*/
      document.querySelector('.el-main').scrollTop = 0
      this.pageInit()
    },

    //改变表头显示
    changeTable(){
        this.$refs.tableNameChange.$emit('openDialog',this.tableName)
    },

  },
  components:{
    tableName,
  },
  computed:{
    ...mapGetters(['button_limit','roleNames'])
  },

}
</script>


<style scoped>
.icon{display: inline-block;width: 32px;height: 32px;}
.icon-choose{background: url('../../assets/images/img/option/icon-choose.png') no-repeat;}


@media only screen and (min-width: 992px) {
  .el-col-offset-5{
      margin-left: 4%;
  }
}
@media only screen and (min-width: 1200px) {
  .el-col-offset-5{
      margin-left: 20.8%;
  }
}
</style>
